<template>
  <div>
    <el-row>
      <el-page-header @back="goBack" content="实时数据"> </el-page-header>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" class="device-list-charts">
          <el-form-item label="当前活动数量">
            <span>{{onlineDeviceCount}}</span>
          </el-form-item>
          <el-form-item label="当前离线设备总数">
            <span>{{offlineDeviceCount}}</span>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row v-model="deviceMap">
      <el-col class="box-card" :span="6" v-for="(tags,index) in deviceMap" :key="index">
        <el-card>
          <div slot="header" class="clearfix">
            <!-- <el-checkbox v-model="dev[1].checked"></el-checkbox> -->
            <span>设备:{{ tags[0] }}</span>
          </div>
          <div v-for="(tag,tagIndex) in tags[1]" :key="tagIndex" class="text item">
            {{ '['+tag.createTime+']  '+tag.tagId }}
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import mqtt from "mqtt";
import { uuid } from 'vue-uuid';
import deviceApi from "@/api/device";
import mqttApi from "@/api/mqtt";
export default {
  name: "RealtimeData",
  data() {
    return {
      client: null,
      deviceMap: new Map(),
      onlineDeviceCount:0,
      offlineDeviceCount:0,
    };
  },
  created() {
  },
  mounted() {
    this.init();
  },
  methods: {
    goBack() {
      window.history.back();
    },
    init(){
      let root = this;
      deviceApi.getDeviceStatistics().then((response) => {
        if (response.data) {
          this.onlineDeviceCount = response.data.onlineDevice;
          this.offlineDeviceCount = response.data.offlineDevice;
        }
      });
      mqttApi.getConfig().then((response) => {
        if (response.data) {
          let config = response.data;
          this.mqttInit(config.ip,config.port,config.user,config.password);
        }
      });

    },
    mqttInit(serverIp,serverPort,username,password) {
      let root = this;
      const options = {
        connectTimeout: 40000,
        clientId: "realtime-data-client-"+uuid.v1(),
        username: username,
        password: password,
        clean: true,
      };
      let mqTTUrl = 'ws://'+serverIp+':'+serverPort+'/mqtt';
      this.client = mqtt.connect(mqTTUrl, options);
      this.client.on("connect", (e) => {
        console.log("连接成功！！！");
        this.client.subscribe("personpositon/+/tags/+", { qos: 0 }, (error) => {
          if (!error) {
            console.log("订阅成功");
          } else {
            console.log("订阅失败");
          }
        });
      });
      // 接收消息处理
      this.client.on("message", (topic, message) => {
        let tag = JSON.parse(message.toString());
        //console.log("收到来自", topic, "的消息", tag);
        if(root.deviceMap.has(tag.deviceCode)==false){
          root.deviceMap.set(tag.deviceCode,[]);
        }
        let tags = root.deviceMap.get(tag.deviceCode);
        tags.splice(0, 0, tag);
        if(tags.length>5){
          tags.pop();
        }
        root.$forceUpdate();
      });
    },
  },
};
</script>
<style>
.device-list-charts {
  text-align: left;
  margin-top: 30px;
}
.box-card {
  padding: 5px;
}
</style>
